    window.onload=(function(){

    /*
        轮播图
    */
    // 先获取左右按钮和图片列表
    let OLeft = document.querySelector(".left");
    let ORight = document.querySelector(".right");
    let OImgList = document.querySelector(".img-list");
    // 获取一个图片数组
    let OImgs = document.querySelectorAll(".img-list img")
    console.log(OImgs)

    // 给右边的按钮添加点击事件
    // 克隆第一张图片实现平滑的效果
    let clonefirstImg = OImgList.firstElementChild.cloneNode();
    // 然后将第一张图片追加到图片列表的末尾
    OImgList.appendChild(clonefirstImg);
    // 定义一个图片索引，用来获取当前是第几张图片
    let index = 0;

    // 设置函数节流锁
    let lock = true;

    function handleRightBtn() {
        if (!lock) return;
        index++;
        OImgList.style.left = index * -1500 + "px";
        // 为什么这里加了一个过渡，因为切换到最后一张克隆图片时，会将过渡去掉
        OImgList.style.transition = "0.5s ease";

        if (index === OImgs.length) {
            index = 0;
            setTimeout(() => {
                // OImgList.style.left = index * -1500 + "px";
                OImgList.style.left = 0;
                // 取消过渡 500ms之后切换第一张
                OImgList.style.transition = "none";
            }, 500)
        }

        // 设置小圆点高亮
        setCircles();

        // 设置关锁
        lock = false;
        // 设置开锁时间
        setTimeout(() => {
            lock = true;
        }, 500)
    };

    // 右边按钮的实现
    ORight.addEventListener("click", handleRightBtn)

    // 给左边的按钮添加点击事件
    OLeft.addEventListener("click", () => {
        if (!lock) return;
        index--;
        if (index === -1) {
            OImgList.style.left = 5 * -1500 + "px";
            OImgList.style.transition = "none";
            index = 4;
            setTimeout(() => {
                OImgList.style.left = index * -1500 + "px";
                OImgList.style.transition = "0.5s ease";
            }, 0)
        } else {
            OImgList.style.left = index * -1500 + "px";
        }

        // 设置小圆点高亮
        setCircles();

        // 设置关锁
        lock = false;
        // 设置开锁时间
        setTimeout(() => {
            lock = true;
        }, 500)
    });

    // 获取小圆点
    const circles = document.querySelectorAll(".circle");
    // 小圆点高亮显示
    function setCircles() {
        for (let i = 0; i < circles.length; i++) {
            if (i === index) {
                circles[i].classList.add("active");
            } else {
                circles[i].classList.remove("active");
            }
        }
    }

    // 小圆点点击切换图片 使用事件代理
    const oCircle = document.querySelector(".circle-list");
    // console.log(oCircle)
    oCircle.addEventListener("click", (e) => {
        // console.log(e.target)
        // 当我点击小圆点的时候
        if (e.target.nodeName.toLowerCase() === "li") {
            // 当前元素的data-n对应得值 和index一一对应
            const n = Number(e.target.getAttribute("data-n"))
            index = n;
            setCircles();
            OImgList.style.left = index * -1500 + "px";
        }
    })

    // 自动轮播
    let autoplay = setInterval(handleRightBtn, 5000);

    // 鼠标移入停止轮播
    const oWrap = document.getElementById("wrap");
    // console.log(oWrap)
    oWrap.addEventListener("mouseenter", () => {
        clearInterval(autoplay);
    });

    // 鼠标移出继续轮播
    oWrap.addEventListener("mouseleave", () => {
        clearInterval(autoplay);
        autoplay = setInterval(handleRightBtn, 5000)
    });


    // 切换登录界面
    var btnlogin = document.querySelectorAll(".login-line-id span")
    console.log(btnlogin)

    function color(c) {
        for (let i = 0; i < btnlogin.length; i++) {
            if (c == i) {
                btnlogin[i].classList.add("line-active");
            } else {
                btnlogin[i].classList.remove("line-active");
            }
        }
    }

    btnb()

    function btnb() {
        for (let i = 0; i < btnlogin.length; i++) {
            btnlogin[i].onclick = (() => {
                color(i);
            })
        }
    }


    // 表单校验
    // 绑定提交按钮的点击事件
    document.getElementById('userlog').onclick = function () {
        // 获取用户名
        var userName = document.getElementById('userName').value;
        let msg = document.getElementById("msg");
        // console.log(msg); 

        // 不能为空
        if (isEmpty(userName)) {
            msg.innerHTML = "用户名不能为空！";
            return;
        }
        // 长度为6-12位
        if (userName.length < 6 || userName.length > 12) {
            msg.innerHTML = "用户名长度在6-12位之间！";
            return;
        }

        // 验证密码
        // 获取密码
        var userPwp = document.getElementById("userpassword").value;

        // 不能为空
        if (isEmpty(userPwp)) {
            msg.innerHTML = "密码不能为空！";
            return;
        }

        // 长度为6-12位
        if (userpassword.length < 6 || userpassword.length > 12) {
            msg.innerHTML = "密码长度在6-12位之间！";
            return;
        }

        // 不能包含姓名 indexOf():判断字符串是否包含指定值，如果不包含则返回-1
        if (userPwp.indexOf(userName) != -1) {
            msg.innerHTML = "密码中不能包含姓名在内！";
            return;
        }

        // 满足条件，则清空提示消息
        msg.innerHTML = "";

        if (userName === "root123" && userPwp === "1234567"){
            let res =window.confirm("恭喜你登录成功")
            if(res){
                location.href="../../html/frontEnd/loginSucces.html"
            }
        }else{
            alert("对不起！你的密码不正确！")
        }
    }

    // 验证码验证
    let send = document.getElementById("btnSendCode1")

    let count = 60; //间隔函数，1秒执行
    var InterValObj1; //timer变量，控制时间
    var curCount1; //当前剩余秒数

    send.onclick = function sendMessage1() {
        curCount1 = count;
        //设置button效果，开始计时
        $("#btnSendCode1").attr("disabled", "true");
        $("#btnSendCode1").val(+curCount1 + "秒再获取");
        InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
        //向后台发送处理数据
        function SetRemainTime1() {
            if (curCount1 == 0) {
                window.clearInterval(InterValObj1); //停止计时器
                $("#btnSendCode1").removeAttr("disabled"); //启用按钮
                $("#btnSendCode1").val("重新发送");
            } else {
                curCount1--;
                $("#btnSendCode1").val(+curCount1 + "秒再获取");
            }
        }
    }

    // 封装一个方法
    /*
        判读字符串是否为空
        如果为空，返回true
        如果不为空，返回false

        trim{Object}去掉字符串前后空格
    */
    function isEmpty(str) {
        if (str == null || str.trim() == "") {
            return true;
        } else {
            return false;
        }
    }


    // 投资理财文字渲染排版
    // 读取数据
    financing();

    function financing() {
        fetch('../../api/loginJson/data.json')
            .then(res => res.json())
            .then(data => {
                console.log(data)
                let firstul = data.first;
                let secondul = data.second;
                render(first, firstul);
                render(second, secondul);
            })
        let first = document.querySelector(".first")
        let second = document.querySelector(".second")

        function render(ul, data) {
            ul.innerHTML = aa(data);
        }

        function aa(data) {
            return data.map((item, index) => {
                return '\
                    <div class="hidebox">\
                    <h4>' + item.title + '</h4>\
                    <p><img src = "' + item.img + '"></p>\
                    <p> 业绩比较基准 <a>' + item.achievement + ' </a><img src="' + item.img1 + '" class="img1"></p > \
                    <p> 起购金额 <a> ' + item.amount + ' </a></p > \
                    <p>理财期限<a>' + item.day + '</a></p>\
                    <button> 交易 </button>\
                    </div>\
                '
            }).join('')
        }
    }

    // 投资理财切换按钮
    /*获取时间源 */
    var oneBox = document.getElementsByClassName('hide');
    var btn = document.querySelectorAll('.tabBtn li');
    console.log(btn)

    function color(e) {
        for (let i = 0; i < btn.length; i++) {
            if (e == i) {
                btn[i].classList.add("active");
            } else {
                btn[i].classList.remove("active");
            }
        }
    }

    btni()

    function btni() {
        for (let i = 0; i < btn.length; i++) {
            btn[i].onclick = (() => {
                color(i);
            })
        }
    }

    //返回顶部 
    var top = document.getElementById('backTop');
    console.log(top);
    top.onclick = function () {
        document.documentElement.scrollTop = 0;
    }

    // 当窗口滚动条滚动时显示
    window.onscroll = function () {
        if (document.documentElement.scrollTop > 300) {
            top.style.display = "block"
        } else {
            top.style.display = "none"
        }
    }
})

